<template>
  <div
    style="cursor: pointer"
    @click="() => sfullScreenStore.changefullScreen()"
    title="全屏"
    :class="
      (fullScreen ? 'icon-fullscreen-exit-line' : 'icon-fullscreen-fill') +
      ' ' +
      'iconfont full-screen'
    "
  ></div>
</template>

<script lang="ts" setup>
import { fullScreenStore } from "@b/store";
import { computed } from "vue";
const sfullScreenStore = fullScreenStore();
const fullScreen = computed(() => sfullScreenStore.fullscreen);
</script>

<style scoped>
.full-screen {
  position: absolute;
  right: 50px;
  margin: 10px 40px 0;
  color: var(--el-color-primary);
}

.full-screen:hover {
  color: var(--el-color-primary-light-3);
}
</style>
